<template>
  <div class="app-container" style="overflow-x: hidden">
    <!-- 通知和搜索 -->
    <!-- <div>
      <div class="van-search" style="background: #dddddd">
        <img :src="newlogo" alt="" style="width: 23%; height: 1.3rem" />
        <div class="van-search__content van-search__content--round">
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon" @click="onsearche()">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #686869"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  ref="input"
                  v-model="sech"
                  type="search"
                  placeholder="输入地区名称 如：X市"
                  class="van-field__control"
                  @search="onsearche()"
                  @input="jujao()"
                />
              </div>
            </div>
            <div
              class="van-field__left-icon"
              @click="resrch()"
              v-show="wordsly"
            >
              <i
                class=""
                style="
                  height: 1.1rem;
                  color: #686869;
                  font-size: 15px;
                  font-weight: bold;
                "
                >╳</i
              >
            </div>
          </div>
        </div>
        <span @click="redirectTo('/order')" style="margin-left: 2%">
          &nbsp;
          <!-- <van-icon name="cart" size="22" color="#1d5ae8" />
        </span>
      </div>
    </div> -->
    <!-- in shopInfos.choicenessList -->
    <!-- banner  暂定高230  宽100% -->
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      class="banner"
      style="background: white"
    >
      <van-swipe-item
        v-for="(banner, index) in shopInfos"
        :key="index"
        style="height: auto; text-align: center; background: white"
      >
        <!-- <div class="topback"></div>
        <div class="bottomback"></div> -->
        <img
          :src="banner.imageUrl"
          @click="redirectTo(banner.jmpUrl)"
          style="height: auto; width: 100%"
        />
      </van-swipe-item>
    </van-swipe>

    <!--服务类-->
    <section v-if="!userId > 0" class="servicetype">
      <van-row class="menu-container" style="padding: 0 4%">
        <van-col span="8">
          <van-dropdown-menu style="margin-left: -5px" active-color="#EE3F00">
            <van-dropdown-item
              :title="localaddress"
              class="select_area"
              ref="area_item"
            >
              <van-area
                columns-num="2"
                :area-list="areaList"
                @confirm="addConfirm"
                @cancel="hideAreaItem"
                :value="area_code"
              />
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-col>
        <van-col span="8">
          <van-dropdown-menu style="margin: auto" active-color="#EE3F00">
            <van-dropdown-item
              :title="skill"
              :options="decorationType"
              @change="changeItemhaus"
            />
          </van-dropdown-menu>
        </van-col>
        <van-col span="8">
          <van-dropdown-menu style="" active-color="#EE3F00">
            <van-dropdown-item
              :title="staff"
              :options="option3"
              @change="changeItembudge"
            />
          </van-dropdown-menu>
        </van-col>
      </van-row>
      <!-- 点选 -->
      <div style="padding-top:5px">
        <ul style="display: flex; flex-wrap: wrap">
          <li
            v-for="(item, index) in bannerList"
            :key="index"
            style="
              width: 21%;
              border-radius: 4px;
              margin-top: 10px;
              text-align: center;
            "
            :style="
              index % 4 != 0 && index != 0
                ? 'margin-left: 4%'
                : index == 0
                ? 'margin-left: 2%'
                : 'margin-left: 2%'
            "
            @click="ontap(item.name, index)"
          >
            <img v-lazy="item.url" alt="" style="width: 3rem; height: 3rem" />

            <p
              style="margin: 5px 0; border-radius: 4px"
              :class="item.name == activey ? 'choice' : null"
            >
              {{ item.name }}
            </p>
          </li>
        </ul>
      </div>
      <div class="divider"></div>
    </section>
    <!--工具类-->
    <section v-if="!userId > 0" class="toolstype"></section>
    <!--原料类-->
    <section v-if="!userId > 0" class="material"></section>
    <!--加入三途-->
    <article
      @click="redirectTo('/store/apply')"
      v-if="!userId > 0"
      class="article"
      :style="{ backgroundImage: `url(${merchant_join})` }"
    >
      <span></span>
    </article>
    <!--广告位-->
    <section class="mybox" style="padding-top: 0.2px; margin-top: 10px">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="看看其他地区的服务网点"
        @load="onLoad"
      >
        <ul v-for="(item, index) in list.data" :key="index">
          <li @click="authRedirectTo(`/shop/detail?id=${item.id}`, item.id)">
            <aside
              class="left"
              :style="{ backgroundImage: `url(${item.shopLogo})` }"
            ></aside>
            <ul class="right" style="">
              <li
                style="
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  height: auto;
                "
              >
                <p
                  style="
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: auto;
                    margin: 0;
                  "
                >
                  {{ item.shopName }}
                </p>
              </li>
              <!-- <li style="font-size:12px;color:rgba(136,136,136,1)"> {{item.intro.substring(0,20)}}{{strlen(item.intro)>20?'...':''}}</li> -->
              <!-- <li style="font-size:12px"><span>{{item.intro}}</span> </li> -->
              <li style="width: 90%; height: auto">
                <span
                  style="
                    width: 100%;
                    padding-right: 7px;
                    color: rgb(150, 151, 153);
                    font-size: 12px;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                  "
                >
                  {{ item.subTitle }}</span
                >
              </li>
              <li style="height: auto; display: flex; flex-wrap: wrap-reverse">
                <span
                  v-for="(ite, index) in item.keywords"
                  :key="index"
                  style="padding-right: 0"
                  :style="index != 0 ? 'margin-left:4px' : null"
                  class="tag-blue"
                  >{{ ite }}</span
                >
              </li>

              <li style="overflow: hidden; height: auto">
                <span v-show="item.space !== -1"
                  ><van-icon name="location-o" style="top: 2px" />
                  {{
                    spacecou[index] == undefined
                      ? '定位中...'
                      : spacecou[index].toFixed(2)
                  }}
                  km</span
                >
                <span>{{ item.city }}</span>
              </li>
            </ul>
          </li>

          <!-- 小dmo分割线 -->
          <van-divider
            :style="{
              margin: '0',
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '5px 16px 0px 16px',
            }"
          ></van-divider>
        </ul>
      </van-list>
    </section>
    <div
      style="
        width: 100%;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        background: #fff;
      "
    >
      更多推荐
    </div>
    <section class="mybox" style="padding-top: 0.2px">
      <van-list
        v-model="moreloading"
        :finished="morefinished"
        finished-text="没有更多了"
        @load="moreonLoad"
      >
        <ul v-for="(item, index) in morelist.data" :key="index">
          <li @click="authRedirectTo(`/shop/detail?id=${item.id}`, item.id)">
            <aside
              class="left"
              :style="{ backgroundImage: `url(${item.shopLogo})` }"
            ></aside>
            <ul class="right" style="">
              <li
                style="
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  height: auto;
                "
              >
                <p
                  style="
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: auto;
                    margin: 0;
                  "
                >
                  {{ item.shopName }}
                </p>
              </li>
              <!-- <li style="font-size:12px;color:rgba(136,136,136,1)"> {{item.intro.substring(0,20)}}{{strlen(item.intro)>20?'...':''}}</li> -->
              <!-- <li style="font-size:12px"><span>{{item.intro}}</span> </li> -->
              <li style="width: 96%; height: auto">
                <span
                  style="
                    width: 100%;
                    padding-right: 7px;
                    color: rgb(150, 151, 153);
                    font-size: 12px;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                  "
                >
                  <!-- <span style="color: #1d5ae8"> 服务设备类型：</span> -->
                  {{ item.subTitle }}</span
                >
              </li>
              <li
                style="
                  width: 100%;
                  height: auto;
                  display: flex;
                  flex-wrap: wrap-reverse;
                "
              >
                <span
                  v-for="(ite, index) in item.keywords"
                  :key="index"
                  style="padding-right: 0"
                  :style="index != 0 ? 'margin-left:4px' : null"
                  class="tag-blue"
                  >{{ ite }}</span
                >
              </li>

              <li style="overflow: hidden; height: auto">
                <span v-show="item.space !== -1"
                  ><van-icon name="location-o" style="top: 2px" />
                  {{
                    spacecou[index] == undefined
                      ? '定位中...'
                      : spacecou[index].toFixed(2)
                  }}
                  km</span
                >
                <span>{{ item.city }}</span>
              </li>
            </ul>
          </li>

          <!-- 小dmo分割线 -->
          <van-divider
            :style="{
              margin: '0',
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '5px 16px 0px 16px',
            }"
          ></van-divider>
        </ul>
      </van-list>
    </section>
  </div>
</template>
<script>
import {
  Area,
  Card,
  Col,
  Divider,
  DropdownItem,
  DropdownMenu,
  Field,
  Icon,
  Popup,
  Row,
  List,
  Search,
  Swipe,
  SwipeItem,
  Notify,
  Toast,
  TabbarItem,
  Tabbar,
} from 'vant';
import {
  pamgt,
  getMerchantList,
  byGroupId,
  storery,
  getWxConfig,
  adList,
  shopServiceTypeList,
  voildteHasWatched,
  datasch,
} from '@/api/api';
import areaList from '@/views/user/module-address-edit/area_all.json';
import scrollFixed from '@/mixin/scroll-fixed';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import wx from 'weixin-js-sdk';
import newlogo from '@/assets/images/newlogo.png';
import huaxian from '@/assets/images/merchant/huaxian.png';
import pentuji from '@/assets/images/merchant/pentuji.png';
import shajiang from '@/assets/images/merchant/shajiang.png';
import shigao from '@/assets/images/merchant/shigao.png';
import zhenshiqi from '@/assets/images/merchant/zhenshiqi.png';
import nizi from '@/assets/images/merchant/nizi.png';
import merchant_head from '@/assets/images/merchant/merchant_head.jpg';
import merchant_join from '@/assets/images/merchant/wokao.png';
import defaultIcon from '@/assets/images/merchant/service_default_icon.png';

export default {
  name: '',
  props: ['userId'],
  mixins: [scrollFixed],
  data() {
    return {
      //是否可以观看
      sech: '',
      morelist: {
        pages: null,
        data: [],
        page: 0,
      },
      activey: '',
      wordsly: false,
      hasBeWatched: false,
      shopInfos: [],
      newlogo: newlogo,
      spacecou: [],
      localaddress: '服务地区',
      staff: '设备类别',
      skill: '服务类型',
      find: true,
      decorationType: [],
      option3: [
        {
          text: '全部',
          value: '',
        },
      ],
      myLocation: {
        lat: 0,
        lng: 0,
      },
      finished: false,
      loading: false,
      morefinished: false,
      moreloading: false,
      //图片素材 begin
      defaultIcon,
      huaxian: huaxian,
      pentuji: pentuji,
      shajiang: shajiang,
      shigao: shigao,
      zhenshiqi: zhenshiqi,
      nizi: nizi,
      merchant_head: merchant_head,
      merchant_join: merchant_join,
      //图片素材 end
      search: {
        area: '',
      },
      select: {
        value: 0,
        option: [
          {
            text: '地区选择',
            value: 0,
          },
        ],
      },
      show: true,
      servicetype: {
        navList: ['服务类', '二手供应'],
        ulList: [
          {
            id: -1,
            name: '',
            icon: '',
          },
        ],
      },
      //默认激活
      currentSort: 0,
      bannerList: [],
      location: {
        lng: null,
        lat: null,
      },
      zoom: 12,
      addressKeyword: '',
      // 新增编辑界面数据
      dataForm: {
        id: null,
        serveName: null,
        logo: null,
        name: null,
        province: null,
        city: null,
        county: null,
        addressDetail: null,
        lat: null,
        lng: null,
        areaCode: null,
        postalCode: null,
        tel: null,
        addTime: null,
        updateTime: null,
        deleted: null,
        title: null,
      },
      areaList: areaList,
      address: '全国地区',
      area_code: '',
      province: {
        name: '省',
        code: '100000',
      },
      city: {
        name: '市',
        code: '100000',
      },
      district: {
        name: '区',
        code: '100000',
      },
      activeName: ['1'],
      searchValue: '',
      img: 'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/wgme7a0tguy7h4g1g4sr.png',
      list: {
        pages: null,
        data: [],
        page: 0,
      },
      query: {
        shopAddress: undefined,
        userId: undefined,
        serviceTypeId: undefined,
      },
      serviceTypeId: -1,
      message: '',
      addadress: '',
      addskill: '',
      addstaff: '',
      keywordser: [],
    };
  },
  computed: {},
  watch: {
    // 利用watch方法检测路由变化：
    $route: function (to, from) {
      //console.log("route变化", to, from)
      //this.userId=to.params.userId;
      // console.log("用户ID变化：" + this.userId)
      this.init();
      //console.log("检测列表变化", this.list)
      // 拿到目标参数 to.query.id 去再次请求数据接口
      //this.loadPageData(to.query.id)
    },
  },

  created() {
    pamgt({}).then((res) => {
      this.shopInfos = res.data.data.list;
      console.log(this.shopInfos);
    });
    this.addskill = '';
    // this.skill = '维修售后';
    this.judge();
    this.servicetype.ulList.length = 0;
    shopServiceTypeList().then((res) => {
      this.servicetype.ulList = res.data.data;
    });
    this.getBannerList();
    this.init();
    byGroupId({ groupId: 'SHOP_KEYWORDS' }).then((res) => {
      let soplei = res.data.data.list;
      soplei.forEach((e) => {
        let opn = {
          text: e.itemName,
          value: e.itemValue,
        };
        this.decorationType.push(opn);
      });
    });
    this.getolist();
    this.getlocal();
    let area = this.$store.getters.getArea;
    if (this.$route.query.find != undefined) {
      this.skill = this.decorationType[2].text;
    }
    if (area.code != null) {
      this.area_code = area.code;
      this.localaddress = area.city;
      this.addadress = area.city;
    } else {
      this.area_code = '100000';
      this.localaddress = '全国地区';
    }
  },

  mounted() {
    // this.getlist();
  },
  methods: {
    ontap(text, value) {
      this.skill = text;
      this.addskill = text;
      this.activey = text;
      this.list.data = [];
      this.list.page = 0;
      this.morelist.data = [];
      this.morelist.page = 0;
      this.onLoad();
      this.moreonLoad();
    },
    jujao() {
      if (this.sech != '') {
        this.wordsly = true;
      } else {
        this.wordsly = false;
      }
    },
    resrch() {
      this.sech = '';
      this.wordsly = false;
      this.addadress = this.sech;
      this.list.data = [];
      this.list.page = 0;
      this.morelist.data = [];
      this.morelist.page = 0;
      this.onLoad();
      this.moreonLoad();
    },

    // 获取列表

    onsearche() {
      let input = this.$refs.input;
      input.blur();
      this.addadress = this.sech;
      this.list.data = [];
      this.list.page = 0;
      this.morelist.data = [];
      this.morelist.page = 0;
      this.onLoad();
      this.moreonLoad();
    },

    getolist() {
      if (this.$route.params.Id == 3) {
        this.addskill = '使用体验';
        this.skill = '使用体验';
        this.list.data = [];
        this.page = 0;
        return;
      } else if (this.$route.params.Id == 2) {
        this.addskill = '维修售后';
        this.skill = '维修售后';
        this.list.data = [];
        this.page = 0;
        return;
      }
    },

    getlist() {
      storery({
        page: this.list.page,
        city: this.addadress,
        serviceTypeId: this.addstaff,
        keywords: this.addskill,
        limit: 10,
      }).then((res) => {
        this.list.data = [];
        this.spacecou = [];
        this.list.data.push(...res.data.data.list);
        this.loading = false;
        this.finished = res.data.data.page >= res.data.data.pages;
        let local = res.data.data.list;
        let loctime = setInterval(() => {
          let lat;
          let lng;
          let that = this;
          wx.getLocation({
            type: 'wgs84',
            success(res) {
              lat = res.latitude;
              lng = res.longitude;
              local.forEach((obj) => {
                that.getSpace(lat, lng, obj.shopLat, obj.shopLng);
              });
            },
          });
          if (this.spacecou != undefined) {
            clearInterval(loctime);
          }
        }, 1000);
      });
    },

    onLoad() {
      this.list.page++;
      storery({
        page: this.list.page,
        city: this.addadress,
        serviceTypeId: this.addstaff,
        keywords: this.addskill,
        limit: 10,
      }).then((res) => {
        //this.list.data = [];
        // this.spacecou = [];
        this.list.data.push(...res.data.data.list);
        this.loading = false;
        this.finished = res.data.data.page >= res.data.data.pages;
        let local = res.data.data.list;
        let loctime = setInterval(() => {
          let lat;
          let lng;
          let that = this;
          wx.getLocation({
            type: 'wgs84',
            success(res) {
              lat = res.latitude;
              lng = res.longitude;
              local.forEach((obj) => {
                that.getSpace(lat, lng, obj.shopLat, obj.shopLng);
              });
            },
          });
          if (this.spacecou != undefined) {
            clearInterval(loctime);
          }
        }, 1000);
      });
    },
    moreonLoad() {
      this.morelist.page++;
      storery({
        page: this.morelist.page,
        city: '',
        serviceTypeId: this.addstaff,
        keywords: this.addskill,
        limit: 10,
      }).then((res) => {
        //this.list.data = [];
        // this.spacecou = [];
        this.morelist.data.push(...res.data.data.list);
        this.moreloading = false;
        this.morefinished = res.data.data.page >= res.data.data.pages;
        let local = res.data.data.list;
        let loctime = setInterval(() => {
          let lat;
          let lng;
          let that = this;
          wx.getLocation({
            type: 'wgs84',
            success(res) {
              lat = res.latitude;
              lng = res.longitude;
              local.forEach((obj) => {
                that.getSpace(lat, lng, obj.shopLat, obj.shopLng);
              });
            },
          });
          if (this.spacecou != undefined) {
            clearInterval(loctime);
          }
        }, 1000);
      });
    },
    changeItembudge(value) {
      if (value != '') {
        this.staff = this.option3[value - 4].text;
      } else if (value == '') {
        this.staff = '全部设备';
        this.addstaff = value;
        this.morelist.data = [];
        this.list.data = [];
        this.list.page = 0;
        this.morelist.page = 0;
        this.onLoad();
        this.moreonLoad();
        return;
      }
      this.addstaff = value;
      this.morelist.data = [];
      this.list.data = [];
      this.list.page = 0;
      this.morelist.page = 0;
      this.onLoad();
      this.moreonLoad();
      this.$refs.area_item.toggle();
    },
    addConfirm(value) {
      if (value[0].name == '北京市') {
        this.localaddress = value[0].name;
        this.addadress = value[0].name;
        this.morelist.data = [];
        this.list.data = [];
        this.list.page = 0;
        this.morelist.page = 0;
        this.onLoad();
        this.moreonLoad();
        this.$refs.area_item.toggle();
        return;
      }
      if (value[0].name == '天津市') {
        this.localaddress = value[0].name;
        this.addadress = value[0].name;
        this.morelist.data = [];
        this.list.data = [];
        this.list.page = 0;
        this.morelist.page = 0;
        this.onLoad();
        this.moreonLoad();
        this.$refs.area_item.toggle();
        return;
      }
      if (value[0].name == '重庆市') {
        this.localaddress = value[0].name;
        this.addadress = value[0].name;
        this.morelist.data = [];
        this.list.data = [];
        this.list.page = 0;
        this.morelist.page = 0;
        this.onLoad();
        this.moreonLoad();
        this.$refs.area_item.toggle();
        return;
      }
      if (value[0].name == '上海市') {
        this.localaddress = value[0].name;
        this.addadress = value[0].name;
        this.morelist.data = [];
        this.list.data = [];
        this.list.page = 0;
        this.morelist.page = 0;
        this.onLoad();
        this.moreonLoad();
        this.$refs.area_item.toggle();
        return;
      }

      if (value[0].code == '100000') {
        this.localaddress = '全国地区';
        this.addadress = '';
        this.morelist.data = [];
        this.morelist.page = 0;
        this.list.page = 0;
        this.onLoad();
        this.moreonLoad();
      } else {
        this.localaddress = value[1].name;
        this.addadress = value[1].name;
        this.morelist.data = [];
        this.list.data = [];
        this.list.page = 0;
        this.morelist.page = 0;
        this.onLoad();
        this.moreonLoad();
      }
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItemhaus(value) {
      this.activey = Number(value) - 2;
      this.decorationType.forEach((e) => {
        if (e.value == value) {
          this.skill = e.text;
          this.addskill = e.text;
          this.activey = e.text;
        }
      });
      this.list.data = [];
      this.list.page = 0;
      this.morelist.data = [];
      this.morelist.page = 0;
      this.onLoad();
      this.moreonLoad();
    },

    judge() {},

    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    selectByService(id) {
      this.serviceTypeId = id;
      this.getList();
    },
    getBannerList() {
      //商品循环列表
      adList({
        position: 100,
      }).then((res) => {
        this.bannerList = res.data.data.list;
      });
    },
    active(index) {
      this.currentSort = index;
    },
    addConfirm_district(e) {
      if (e[0].code == '100000') {
        this.city.name = '区';
      } else {
        this.province.code = e[0].code;
        this.province.name = e[0].name;
        this.city.code = e[1].code;
        this.city.name = e[1].name;
        this.district.code = e[2].code;
        this.district.name = e[2].name;
        this.search.area =
          this.province.name + this.city.name + this.district.name;
      }
      this.show = false;
    },
    hideAreaItem_district() {
      this.show = false;
    },
    handleName() {
      //console.log(111111);
    },
    init() {
      getWxConfig({
        url: location.href.split('#')[0],
      }).then((res) => {
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: res.data.data.appId,
          // 必填，生成签名的时间戳
          timestamp: res.data.data.timestamp,
          // 必填，生成签名的随机串
          nonceStr: res.data.data.nonceStr,
          // 必填，签名，见附录1
          signature: res.data.data.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ['checkJsApi', 'openLocation', 'getLocation'],
        });
      });
      wx.error(function (res) {
        //alert('出错了：' + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      });
      let that = this;
      wx.ready(function () {
        wx.checkJsApi({
          jsApiList: ['checkJsApi', 'openLocation', 'getLocation'],
          success: function (res) {
            //alert('成功了：' + res.errMsg);
            //console.log("检测微信API成功：", res);
            that.getList();
          },
        });
      });
    },
    //获取经纬度直线距离
    getSpace(lat1, lng1, lat2, lng2) {
      if (!(lat1 && lng1 && lat2 && lng2)) {
        return -1;
      } //经纬度不存在返回-1
      let radLat1 = (lat1 * Math.PI) / 180.0;
      let radLat2 = (lat2 * Math.PI) / 180.0;
      let a = radLat1 - radLat2;
      let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      let s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      this.spacecou.push(s);

      return s;

      // 单位千米
    },
    //小tab
    redirectTo(link) {
      if (link == null || link == '' || link == undefined) {
        return;
      }
      if (link.indexOf('http') != -1) {
        window.location.href = link;
        return;
      }
      this.$router.push({
        path: link,
      });
    },
    // 门店跳转
    authRedirectTo(link, id) {
      voildteHasWatched({ shopId: id })
        .then((res) => {
          if (res.data && res.data.data && res.data.status) {
            this.hasBeWatched = true;
            this.message = res.data.errmsg;
          } else {
            this.message = res.data.errmsg;
          }
          this.$router.push({
            path: link,
          });
        })
        .catch((err) => {
          this.$router.push({
            path: link,
          });
          if (err.data && err.data.data && err.data.status) {
            this.hasBeWatched = true;
            this.message = err.data.errmsg;
          } else {
            this.message = err.data.errmsg;
          }
          // if (!this.hasBeWatched) {
          //   Notify({
          //     type: 'primary',
          //     message: this.message,
          //     duration: 3000,
          //   });
          //   return; //没有权限观看
          // }
        });

      if (link == null || link == '' || link == undefined) {
        return;
      }
      if (link.indexOf('http') != -1) {
        window.location.href = link;
        return;
      }
    },
    showPopup() {
      this.show = true;
    },
    searchAddress() {
      this.serviceTypeId = -1;
      this.getList();
    },
    //获取渲染数据
    getlocal() {
      datasch().then((res) => {
        let list = res.data.data.serviceTypeList;
        let obj;
        list.forEach((ite) => {
          obj = {};
          obj['text'] = ite.name;
          obj['value'] = ite.id;
          this.option3.push(obj);
        });
      });
    },
  },
  components: {
    [Row.name]: Row,
    [TabbarItem.name]: TabbarItem,
    [Tabbar.name]: Tabbar,
    [Col.name]: Col,
    [Card.name]: Card,
    [List.name]: List,
    BaiduMap,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Divider.name]: Divider,
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Popup.name]: Popup,
    [Notify.name]: Notify,
  },
};
</script>
<style lang="scss" scoped>
.choice {
  background: #1b91fe;
  color: aqua;
}
.tag-blue {
  padding: 2.5px 2px;
  width: auto;
  font-size: 12px;
  border-radius: 4px;
  background: rgba(29, 90, 232, 0.1) !important;
  color: #1d5ae8 !important;
  margin-top: 5px;
}
/**方形图标 */
.square::before {
  color: #1b91fe;
  content: '▍';
}

.van-dropdown-menu__item {
  background: blue;
}
/deep/.van-dropdown-menu__bar {
  margin-left: 10px;
  padding-right: 11px;
  border-radius: 4px;
  height: 29px;
  background: #e9e9e9 !important;
}

.active {
  color: rgb(0, 0, 0);
  font-weight: bolder;
}

/**分割快 */
.divider {
  display: block;
  width: 100%;
  height: 10px;
  min-width: 50px;
  margin: 0 auto;
  // background-color: rgba(242, 242, 242, 1);
}

/**分割线 */
.line {
  width: 100%;
  height: 1px;
  background-color: rgba(125, 125, 125, 0.2);
  transform: scale(1, 0.5);
}
.van-search {
  padding: 0.75rem 4%;
}

/deep/ .van-search .van-cell {
  border: 1px solid #1d5ae8 !important;
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}
.van-search,
.van-search__content {
  background: #f2f1f6 !important;
}
/deep/.van-dropdown-menu__title::after {
  right: -10px !important;
  border-color: transparent transparent black black !important;
}
/deep/.van-dropdown-menu__title {
  padding: 0 !important;
}
/deep/.van-field__control {
  font-size: 14px;
}
.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}
.van-search__content {
  border-radius: 0px !important;
  // height: 1.5rem;
}

.van-cell__value--alone {
  height: 1.1rem;
}

.myheader {
  background-size: 100% 100%;
  height: 185px;
  background-repeat: no-repeat;
  position: relative;

  > ul {
    height: 40px;
    padding: 0 16px;
    display: flex;
    transform: translateY(50%);

    /*li:nth-of-type(1) {*/
    /*  width: 100px;*/

    /*  .van-dropdown-menu {*/
    /*    box-sizing: border-box;*/
    /*    border-top-left-radius: 20px;*/
    /*    height: 100%;*/
    /*    background-color: transparent;*/
    /*    border-bottom-left-radius: 20px;*/
    /*    border: 1px solid #4570CE;*/

    /*    /deep/.van-dropdown-menu__title {*/
    /*      color: rgb(255, 255, 255) !important;*/
    /*    }*/
    /*  }*/
    /*}*/

    li:nth-of-type(2) {
      flex: 1;

      // .van-search {
      //   padding: 0 12px;
      //   height: 100%;
      //   background-color: transparent !important;
      //   padding: 0 0px;

      //   .van-search__content {
      //     align-items: center;
      //     height: 100%;
      //     flex: 1;
      //     padding-left: 8px;
      //     background-color: transparent;
      //     border: 1px solid #4570ce;
      //     box-sizing: border-box;
      //     //border-left-width: 0px;
      //   }

      //   /deep/ .van-field__control {
      //     color: rgb(255, 255, 255) !important;
      //   }
      // }
    }

    li:nth-of-type(3) {
      border: 1px solid #4570ce;
      width: 40px;
      height: 40px;
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;
      box-sizing: border-box;
      border-left-width: 0px;
      align-items: center;
      justify-content: center;
      display: flex;
      color: white;
      cursor: pointer;
      font-size: 16px;
    }
  }

  .van-popup {
    margin-top: 60px;
  }
}

.adrotation {
  height: 100px;
  padding: 0 16px;
  transform: translateY(-70%);

  .van-swipe {
    height: 100%;
    width: 100%;
    border-radius: 10px;
  }

  .van-swipe-item img {
    width: 100%;
    height: 100%;
  }
}

.servicetype {
  padding-top: 10px;

  background-color: rgb(255, 255, 255);

  li,
  li a {
    cursor: pointer;
  }

  .cards {
    nav {
      padding: 0 16px;
    }

    nav {
      display: flex;
      height: 30px;
      align-items: center;

      a {
        display: block;
        margin-right: 20px;
        color: #5b5b5b;
      }
    }
  }

  /*
    .mycard {

      ul,
      nav {
        padding: 0 16px;
      }

      nav {
        display: flex;
        height: 30px;
        align-items: center;

        a {
          display: block;
          margin-right: 20px;
          color: #5B5B5B;
        }

      }

      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: center;

        li {
          //width: 5rem;
          //height: 5rem;
          flex: 1;

          p {
            margin: 0 0;
            padding: 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            width: 100%;
            overflow-x: hidden;
            text-overflow: ellipsis;
          }

          p:nth-of-type(1) {
            height: 4rem;
            transform: scale(.85);
            img {
              width: 4rem;
              height: 4rem;

            }
          }

          p:nth-of-type(2) {
            overflow: hidden;
            white-space: nowrap;
            height: 1rem;
          }
        }
      }
    }
    */
}

.article {
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100px;

  span {
    transform: scale(0.7);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    display: block;
    right: 0;
    z-index: 1;
  }
}

.mybox {
  background-color: white;

  nav {
    display: flex;
    height: 30px;
    align-items: center;
    padding: 0 16px;

    a {
      display: block;
      margin-right: 20px;
      color: #5b5b5b;
      transform: scale(1.1);
    }
  }

  ul {
    > li {
      height: 120px;
      width: 100%;
      padding: 0 15px;
      margin-bottom: 5px;
      margin-top: 15px;
      display: flex;

      .left {
        background-color: #1e7bf4;
        background-size: 100% 100%;
        width: 100px;
        height: 100px;
        min-height: 100px;
        min-width: 100px;
        background-repeat: no-repeat;
        box-sizing: border-box;
        //box-shadow: 2.5px 2.5px 5px;
        border-radius: 4px;
      }

      .right {
        width: calc(100% - 100px);
        height: 119px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        > li {
          display: flex;

          // padding-right: 32px;
          margin: 0;
          font-size: 15px;
        }

        > li:nth-of-type(1) {
          font-weight: bold;
        }
        > li:nth-of-type(2) {
        }

        > li:nth-of-type(4) {
          display: flex;
          justify-content: space-between;

          > span {
            font-size: 14px;

            color: #5b5b5b;
          }
        }

        .border-radius {
          padding: 2.5px 2px;
          width: auto;
          font-size: 14px;
          border-radius: 4px;
        }

        .border-radius:not(:nth-of-type(1)) {
          //margin: 0 auto;
          margin-left: 3px;
        }
      }
    }
  }
}
</style>
